import React, { FC, useEffect } from "react";
import { QuestionCheckTimePropsType } from "./interface";
import { Form, Input } from "antd";

const PropComponent: FC<QuestionCheckTimePropsType> = (
  prop: QuestionCheckTimePropsType
) => {
  const { title, placeholder, onChange, disabled } = prop;
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ title, placeholder });
  }, [title]);
  function handleValueChange() {
    if (onChange == null) return;
    onChange(form.getFieldsValue());
  }
  return (
    <Form
      layout="vertical"
      initialValues={{ title, placeholder }}
      disabled={disabled}
      onValuesChange={handleValueChange}
      style={{ maxWidth: 250 }}
      form={form}
    >
      <Form.Item label="标题" name="title">
        <Input />
      </Form.Item>
      <Form.Item label="placeholder" name="placeholder">
        <Input />
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
